Shopping Cart

The Shopping Cart is a quick and easy method of setting up a page from which users can `shop' on your system: they can select from products or services that you specify, and fill their own `shopping cart'. Users have control over their own shopping cart: they can delete items, add items, etc. When a user is finished loading up their cart, they can click on a button that activates a CGI script, which could, for example, send an acknowledgment to the user, and send the order to your order-processing department.

There are four steps involved in setting up a Shopping Cart:

Creating the Shopping cart kiosk

To create the Shopping Cart kiosk and console control, drag and drop this mouse8 onto the Editor. When you do so, a Design-Time Control (DTC) appears, enabling you to configure the Shopping Cart.

The kiosk is a frameset document consisting of two frames. The upper frame will contain the Shopping Cart console document, which is also created by the Shopping Cart DTC. The lower frame will contain one or more forms for individual products.

The console document consists of a JavaScript; when this page is displayed in the browser, it shows a list of all items selected. When a user selects an item from one of the product forms in the lower frame, this choice is added to a list in the console, and a running total of purchases is updated. The console also has buttons for clearing the list, deleting specific items, and for indicating that the user has finished selecting items.

The JavaScript in the console document also generates an HTML form that is displayed in the lower frame of the kiosk when the user clicks on the button indicating that they have finished selecting items. This form lists all of the user's selections, and the total cost. When the user submits this form, the form's data will be submitted to the CGI script that you specified.

  • Enter the filename of the frameset page for the kiosk in the first text box. The DTC will create this page automatically. If you enter an existing filename, that file will be overwritten; for this reason, if you wish to create a customized kiosk page, you should do so after running this DTC.
  • Enter the filename for the console page in the second text box. The DTC will create this page automatically.
  • Enter the filename of a page containing (or containing links to) forms for the individual products that you wish to offer in the third text box. These forms are generated using the Shopping Cart Form DTC.
  • Enter the URL of the CGI script that will be called when the user submits the Shopping Cart form.

When you click on [OK], the DTC inserts a link in the current document, pointing to the kiosk (frameset) document. You can choose to keep this link to refer to the kiosk, or set up another link in another document. If you wish to run the DTC again to edit the values you entered above, you have to do so by clicking inside this link, and then choosing DTC Properties... from the pop-up menu, or Design Time Control... from the Insert menu.


Creating the Shopping Cart forms

To insert a Shopping Cart Form into your page, drag and drop this mouse 8 onto the editor. When you do so, a Design-Time Control (DTC) appears, enabling you to configure the form.

The form will be inserted into the current document, but you can copy it to a different document later. The forms you create must be in, or be in documents linked to, the `Shopping Cart Form' document that you specified when you created the kiosk. How you arrange the pages and forms is up to you; the important thing is that on each page, each form must have a unique name, as explained below.

  • Each product's form must be given a unique name (one that is not used for another form in the same page). Enter the name for the current form in the Form Name text box. (This value becomes the value of the NAME attribute of the corresponding FORM element).
  • Enter the name of the product in the Product Name text box.
  • Enter price of the product in the Unit Price text box. This value must be a number without a currency symbol (such as `$').
  • The text in the Order button label will appear on the button for this product in the order form.
  • You can optionally enter some extra information about the product. Do not surround this text with quotes. This text not be displayed in the form but will be sent to the CGI script.

Setting up the CGI script

The back-end CGI script to do the shopping cart processing is not supplied with HoTMetaL PRO--there are many different types of Web servers, each of which need slightly different scripts configured in different ways.

This script must process the data from the final order form. This data is in the standard format for form data--that is, as a sequence of name/value pairs, where the name and value are separated by `=', and the pairs are separated by `&'. For example:

name1=value1&name2=value2&name3=value3

The data is organized as follows:

  • For each product in the final order, two name/value pairs are submitted:
    1. The name in the first pair is the `product name' for that product, as entered in the Shopping Cart Form DTC.
    2. The value in the first pair is the quantity of that product that was ordered.
    3. The name in the second pair is the same as the name in the first pair, but with `.hidden' appended. For example, `redshoes.hidden'.
    4. The value in the second pair is the `extra information' for that product, as entered in the Shopping Cart Form DTC.
  • The order in which the product data is submitted cannot be predicted ahead of time, since it depends on which products were chosen, and in which order.
  • After the product data, a pair with name `total', and value equal to the total value of the order, is submitted.

Please see the links on CGI scripts on the `Technical Reference' page, accessible from the HoTMetaL PRO `Help' menu, for some places to go for more information on using and configuring CGI scripts.

Note: Creating pages that can do online transactions with credit cards and security is beyond the scope of this manual. Please contact your Internet Service Provider for more information.

Running the Shopping Cart

A user accesses the Shopping Cart by opening the kiosk document in a browser. Initially, the kiosk contains the console form in the top frame, and the order form in the lower frame.

  • To select a product, enter the quantity in the order form and click on the corresponding button. The selection is added to the list in the console.
  • To delete a selection, select it in the console and click on [Delete Item].
  • To delete all selections, click on [Clear All Items] in the console.
  • If you wish to change the quantity of a product in your order, enter the new quantity in the order form and click on the button again. The new quantity replaces the previous selection. For example, if you initially selected two of something, and want to increase this to five, enter `5' and click on the button again.
  • When you have finished selecting items, click on [End Shopping Trip]. This displays the final order form in the bottom frame.
  • If you are happy with your order, click on [Accept] in the final order form. This sends the form's data to the CGI script.